/**
 * 项目中可以复用的数据和逻辑方法
 */
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

/**
 *
 * @param {*} apiCallBack 页面中请求的方法=》回调函数（进入可视区域执行）
 */
export function useObserve (apiCallBack) {
  // 1.获取监控的元素（组件）
  const target = ref(null)
  // 2. 执行监控
  /**
       * 1. useIntersectionObserver函数的返回值是个对象，对象中的stop方法可以停止监控
       * 2. useIntersectionObserver(
       * target:监控的dom对象或组件实例,
       * callback:被监控对象进入可是区域执行的回调函数,
       * options?:配置监控行为 =》?是ts语法，代表非必传
       * )
       *
       * 需求：当前组件进入可视区，发请求获取数据（只发一次）
       * 根据useIntersectionObserver监控函数的回调中的isIntersecting判断实现
       */
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是个数组：解构出数组中对象的isIntersecting的值（boolean）=》用来判断元素是否进入可是区域
      console.log(isIntersecting ? '进入可视区' : '离开可视区')
      if (isIntersecting) {
        // 发请求
        // getNew()
        apiCallBack()
        // 发完，停止监控
        stop()
      }
    },
    {
      threshold: 0 // 说明：0-1区间 =》默认大于0 =》如果想一旦进入可视边界立马执行，就设置为0
    }
  )
  // 返回监控元素的数据变量
  return { target }
}
